<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '身高体重',
  },
}
</route>

<template>
  <view class="absolute left-0 right-0"
    :style="{ top: '0', bottom: bottom + 'px' }"
  >
    <view 
      class="rounded-12rpx w-center m-a bg-#fff !mt-32rpx" 
      style="height: calc(100% - 200rpx);"
      :class="[{ 'dark-color2': themeConfig.theme === 'dark' }]"
    >
      <view class="font-size-26rpx pt-32rpx px-32rpx pb-20rpx">
        当前选择
      </view>
      <view class="font-size-32rpx font-600 pb-20rpx text-center">
        <!-- {{ weight ? weight + 'kg' : weight === 0 ? '保密' :'待选择体重' }} -->
        {{ height ? height + 'cm' : '待选择身高' }}/{{ weight ? weight + 'kg' : '待选择体重' }}
      </view>
      <view class="border-1px"></view>

      <view class="flex py-32rpx relative" style="height: calc(100% - 224rpx);">
        <view class="border-center"></view>
        <!-- 身高 -->
        <scroll-view 
          class="w-1/2 box-border h-full" 
          :scroll-y="true" 
          :show-scrollbar="false"
          :scroll-top="heightScrollTop"
        >
          <view class="w-200rpx h-30px m-a flex-center leading-0 font-size-26rpx rounded-8rpx mb-12px"
            v-for="(item, index) in heightList"
            :key="index"
            :class="[{ 'selected': height === item }]"
            @click="height = item"
          >{{ item }}cm</view>
        </scroll-view>

        <!-- 体重 -->
        <scroll-view 
          class="w-1/2 box-border h-full" 
          :scroll-y="true" 
          :show-scrollbar="false"
          :scroll-top="weightScrollTop"
        >
          <!-- {{ item === 0 ? '保密' : `${item}kg` }} -->
          <view class="w-200rpx h-30px m-a flex-center leading-0 font-size-26rpx rounded-8rpx mb-12px"
            v-for="(item, index) in weightList"
            :key="index"
            :class="[{ 'selected': weight === item }]"
            @click="weight = item"
          >{{ item }}kg</view>
        </scroll-view>
      </view>
    </view>

    <view class="position-b-center !fixed w-750rpx m-a pt-24rpx bg-#fff box-sd"
      :style="{ paddingBottom: safeAreaInsets.bottom + 'px' }"
      :class="[{ 'dark-color2': themeConfig.theme === 'dark' }]"
    >
      <view class="btn-full w-center">
        <wd-button 
          class="btn-w-full btn-h-78"
          @click="submit"
        >确定</wd-button>
      </view>
      <view class="pb-24rpx"></view>
    </view>
  </view>
</template>
  
<script lang="ts" setup>
import { useThemeStore, useUserStore } from "@/store";
import { back } from "@/utils";
import { useToast } from "wot-design-uni";

// 主题颜色
const { themeConfig } = useThemeStore();
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync();
const user = useUserStore();
const toast = useToast();

const fromType = ref('');
const startNum = 140;
const startWeightNum = 30;
const heightScrollTop = ref(0);
const weightScrollTop = ref(0);
onLoad((options) => {
  const { type } = options || {};
  fromType.value = type || 'heightInfo';

  height.value = user[fromType.value].height;
  weight.value = user[fromType.value].weight;

  heightScrollTop.value = (height.value - startNum) * 42;
  weightScrollTop.value = (weight.value - startWeightNum + 1) * 42;
})

const safeTop = safeAreaInsets?.top || 0;
const safeBottom = safeAreaInsets?.bottom || 0;
const top = ref(safeTop);
const bottom = ref(safeBottom);
// #ifdef MP-WEIXIN
top.value = safeTop + 44;
// #endif

const height = ref(0);
const heightList = ref<number[]>([]);
const initHeightList = () => {
  for (let index = startNum; index <= 220; index++) {
    heightList.value.push(index);
  }
}

const weight = ref(0);
const weightList = ref<number[]>([]);
const initWeightList = () => {
  for (let index = startWeightNum; index <= 200; index++) {
    weightList.value.push(index);
  }
}

initHeightList();
initWeightList();

const submit = () => {
  if (!height.value) return toast.show('请选择身高');
  if (!weight.value) return toast.show('请选择体重');
  user[fromType.value].height = height.value;
  user[fromType.value].weight = weight.value;
  back();
}

onShow(() => {
  nextTick(() => {
    // 设置页面标题
    themeConfig.title = '身高体重';
  })
})
</script>

<style lang="scss" scoped>
.selected {
  color: #fff;
  background: linear-gradient( 180deg, #9C6DEF 0%, #E5C4FF 100%);
}

.border-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scaleX(0.5);
  width: 1px;
  height: calc(100% - 64rpx);
  background-color: rgba(187, 187, 187, 0.6);
}
</style>
      